<template>
	<view class="courseDetail-content">
		<view class="detail-body">
			<view class="detail-content">
				<view class="detail-image">
					<image src="../../static/index/course.png" mode=""></image>
				</view>
				<view class="detail-text">
					<view class="detail-name">{{courseinfo.title}}</view>
					<view class="detail-price">定价{{courseinfo.price}}元</view>
					<view class="detail-tips">注意：必须购买后才能查看、下载、打印文档</view>
				</view>
				<view class="course-list">
					<u-tabs :list="list" active-color='#2AC092' :is-scroll="false" :current="current"
						@change="change"></u-tabs>
					<scroll-view class="directory" scroll-y="true" v-if="current == 0">
						<view class="directory-item" v-for="(item,index) in courseinfo.directories" :key="index">
							<view class="directory-title">
								<view class="directory-name">{{item.title}}</view>
							</view>
							<view class="fun-box" v-if="courseinfo.is_pay == 0" @click="courseDetail(item.id)">查看</view>
<!-- 							<view class="islock" v-if="courseinfo.is_pay == 0">
								<image src="/static/index/lock.png" mode=""></image>
							</view> -->
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="consult-box">
				<u-button type="success" v-if="courseinfo.is_pay == 0" shape="circle" :custom-style="customStyle" @click="gotoBuy(courseinfo)">立即购买</u-button>
				<u-button v-if="courseinfo.is_pay == 1" shape="circle" disabled :custom-style="customStyle1">立即购买</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getcoursedetail,addcourseorder } from '@/api/live.js'
	export default {
		data() {
			return {
				customStyle: {
					background: '#2AC092',
					color: '#fff'
				},
				customStyle1: {
					background: '#ccc',
					color: '#fff'
				},
				list: [{
					name: '教学内容目录'
				}],
				current: 0,
				dataList: [
				],
				courseinfo: {},
			}
		},
		onLoad(e) {
			// console.log(555,e);
			this.init(e.id)
		},
		// mounted() {
		// 	this.init()
		// }
		methods: {
			init(id){
				let that = this
				getcoursedetail(id).then(res=>{
					// console.log(res.data.data);
					that.courseinfo = res.data.data
				})
			},
			change(index) {
				this.current = index;
			},
			courseDetail(id){
				uni.navigateTo({
					url:'/pagesA/teach-detail/teach-detail?id='+id
				})
			},
			gotoBuy(obj) {
				// console.log(88);
				// 创建订单
				addcourseorder({live_course_id:obj.id}).then(res=>{
					// console.log(999,res.data.data);
					uni.navigateTo({
						url: '/pagesA/confirmOrder/index?productInfo=' + JSON.stringify(obj) + '&order_no='+res.data.data.order_no
					})
				})
				// 跳转
				// uni.navigateTo({
				// 	url: '/pagesA/confirmOrder/index?productInfo=' + JSON.stringify(obj)
				// })
			}
		}
	}
</script>

<style lang="scss">
	.detail-image {
		width: 100vw;
		height: 420rpx;

		>image {
			width: 100%;
			height: 100%;
		}
	}

	.detail-text {
		padding: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
		background-color: #fff;

		.detail-name {
			font-size: 34rpx;
		}

		.detail-price {
			font-size: 36rpx;
			color: #FF4D4D;
			margin: 20rpx 0;
		}

		.detail-tips {
			font-size: 24rpx;
			color: #999999;
			width: max-content;
		}
	}

	.course-text {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		justify-content: space-between;


		.text-item {
			text-align: center;

			>view:first-child {
				font-size: 26rpx;
				margin-bottom: 10rpx;
			}

			>view:nth-child(2) {
				font-size: 22rpx;
				color: #999999;
			}
		}

	}

	.course-list {
		margin-top: 20rpx;

		.directory {
			height: 30vh;
			background-color: #fff;
		}

		.directory-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			border-bottom: 1rpx solid #F5F5F5;

			.directory-title {
				display: flex;
				align-items: center;

				.period {
					color: #2AC092;
					border: 1rpx solid #2AC092;
					background-color: #DEFCF3;
					padding: 10rpx 15rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
				}

				.directory-name {
					margin-left: 20rpx;
					font-size: 30rpx;
				}
			}

			.fun-box {
				color: #fff;
				background-color: #FFA23B;
				border-radius: 25rpx;
				padding: 10rpx 15rpx;
			}
			.fun-box1 {
				color: #fff;
				background-color: #2AC092;
				border-radius: 25rpx;
				padding: 10rpx 15rpx;
			}

			.islock {
				width: 40rpx;
				height: 40rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.buy-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;

		.buy-price {
			font-size: 28rpx;

			>span {
				font-size: 36rpx;
				color: #FF4D4D;
			}
		}
	}
	
	.buy-box1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 150rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
	
		.down-box{
			display: flex;
			>image{
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	
	
	
	.consult-box{
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx;
		width: 100%;
	}
</style>